<template>
  <i :class="iconsClass(iconName) "  :style="iconStyle"></i>
</template>
<script setup>
  import "@opentiny/icons/style/all.css";//默认图标库样式
  import {reactive, toRef, ref, computed, getCurrentInstance} from 'vue';
  const props = defineProps({
    iconName: {type: String, default: 'icon-tupian'},
    size: {type: String, default: '14px'},
    color: {type: String, default: ''},
    // 新增样式属性
    opacity: {type: String, default: '1'}, 
    transform: {type: String, default: 'none'},
    padding:{type:String,default:""}
  });
  const iconsClass = (iconName) => {
    return 'ci-' + iconName;
  };
const iconStyle = computed(() => ({
    fontSize: props.size || '14px',
    color: props.color,
    opacity: props.opacity,
    transform: props.transform,
    padding:props.padding
  }));
</script>
<style>
  .svg-icon {

  }
</style>
